<template>
  <div class="recursionMap">
    <template v-if="options&&options.children&&options.children.length>0">
      <header @click="showBool=!showBool">
        <i :style="{transform:showBool?'rotate(90deg)':'rotate(0deg)'}" class="el-icon-caret-right"></i>
        <span>{{options.name}}</span>
      </header>
      <div class="hide" v-show="showBool">
        <recursionMap
          :promptPanel="promptPanel"
          v-for="(_item,_index) in options.children"
          :key="_index"
          :options="_item"
        ></recursionMap>
      </div>
    </template>
    <template v-else-if="options&&options.children&&options.children.length==0">
      <header @click="showBool=!showBool">
        <i :style="{transform:showBool?'rotate(90deg)':'rotate(0deg)'}" class="el-icon-caret-right"></i>
        <span>{{options.name}}</span>
      </header>
    </template>
    <template v-else>
      <div
        class='line'
        @click="$parent.changeActive(options)"
      >
        <i :class="options.icon + ' active_son'"></i>
        <span class="active_son">{{options.propertyName}}</span>
        <section class="moreMap" v-if="promptPanel">
          <div v-if="options.propertyName">{{options.propertyName}}</div>
          <div v-if="options.dataType">属性类型： {{options.dataType}}</div>
           <div v-if="options.hasDict">是否是字典类型： {{options.hasDict==1?'是':'否'}}</div>
        </section>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: "recursionMap",
  props: {
    options: {
      default: () => {
        return {};
      }
    },
    promptPanel: {
      default: () => {
        return false;
      }
    },
    activeItem: {
      default: () => {
        return {};
      }
    }
  },
  watch: {},
  components: {},
  data() {
    return {
      showBool: false
    };
  },
  methods: {
    changeActive(item) {
      this.activeItem = item;
      this.$parent.changeActive(item);
    }
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  computed: {}
};
</script>

<style scoped lang="scss">
* {
  box-sizing: border-box;
}
.recursionMap {
  header {
    display: flex;
    align-items: center;
    height: 0.6rem;
    justify-content: flex-start;
    font-size: 14px;
    font-weight: 500;
    i {
      color: rgba($color: #909399, $alpha: 1);
      margin: 0 0.1rem;
      transition: all 0.5s ease;
    }
  }
  .hide {
    padding-left: 0.2rem;
  }
  .line {
    display: flex;
    align-items: center;
    height: 0.6rem;
    justify-content: flex-start;
    font-size: 14px;
    font-weight: 500;
    i {
      color: rgba($color: #909399, $alpha: 1);
      margin: 0 0.1rem;
    }
    .moreMap {
      position: absolute;
      width: 4rem;
      top: 0;
      right: -4.1rem;
      opacity: 0;
      padding: 0.1rem 0.1rem;
      border-radius: 0.1rem;
      transition: all 0.5s ease;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      border: 1px solid #ebeef5;
      background-color: #fff;
      div:nth-child(1) {
        width: 100%;
        height: 0.4rem;
        font-size: 0.24rem;
        font-weight: bold;
        line-height: 0.4rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      div:nth-child(2) {
        width: 100%;
        text-indent: 0.2rem;
        padding: 0.1rem 0 0.2rem;
        font-size: 0.1rem;
        line-height: 0.3rem;
      }
      div:nth-child(3) {
        width: 100%;
        height: 0.4rem;
        font-size: 0.1rem;
        border-top: 1px solid rgba($color: #e4e7ed, $alpha: 0.8);
        line-height: 0.4rem;
      }
    }
  }
  .line:hover {
    .moreMap {
      opacity: 1;
    }
  }
  .active_item {
    .active_son {
      color: rgba(1, 178, 122, 0.6);
      font-weight: 600;
    }
  }
}
</style>
